🏗️ ConstructQ · หน้าจอจัดการโครงการ

Create/Edit Project Screen Guide · v1.0
Reference: ConstructQ_CreateProject_v14.0.html
Owner: วุธ (PM/SA) · Date: 3 กรกฎาคม 2569 (2026-07-03)
Audience: Software Development Team

1. ภาพรวม (Overview)

หน้าจอ จัดการโครงการ คือหน้าที่ผู้ใช้ระดับ Project Manager (PM) หรือ Admin ใช้สำหรับสร้างและแก้ไขโครงการก่อสร้าง โครงการ 1 โครงการเก็บข้อมูลตั้งแต่ชื่อ · ประเภท · Timeline · Sites/Zones/Floors/Rooms · สมาชิกทีม · ไฟล์แบบและเอกสาร · จนถึง โครงสร้างการแบ่งงาน (WBS L1→L2→L3) ที่จะถูกนำไปสร้าง Task ตรวจสอบคุณภาพ (QC) ในภายหลัง

1.1 ผู้ที่มีสิทธิ์เข้าใช้

บทบาทสร้างใหม่แก้ไขลบดูอย่างเดียว
👤 Project Manager (PM)✅ โครงการที่ตนดูแล✅ โครงการที่ตนดูแล——
🛡️ Admin / Super Admin✅ ทุกโครงการ✅ ทุกโครงการ✅—
👥 QC Manager (QCM)———✅ (ดูโครงสร้างเพื่อ Assign)
🔍 QC Inspector / Sub———✅ (เฉพาะที่ได้รับมอบหมาย)

1.2 ทางเข้าและตอนที่ทำ

2. ขั้นตอนหลัก (5 Steppers)

1
ข้อมูลโครงการ
Basic info
2
ไซต์ / โซน
Sites+Zones+Floors+Rooms
3
สมาชิก
Team + Roles
4
ไฟล์แบบ
Drawings·BOQ·Spec·Contract
5
โครงสร้าง WBS
L1→L2→L3

3. กรณีที่ 1 — สร้างโครงการใหม่

3.1 Stepper 01 · ข้อมูลโครงการ

ฟิลด์Typeบังคับหมายเหตุ
รหัสโครงการtext · Auto/Manual toggle✅Auto = ระบบสร้าง PRJ-YYYY-NNN · Manual = user กรอกเอง (unique)
ชื่อโครงการtext✅ไม่ซ้ำใน organization
ประเภทโครงการdropdown 9 ตัวเลือก✅อาคารสำนักงาน · พักอาศัย · โครงสร้างพื้นฐาน · Renovation · โรงงาน · ดาต้าเซ็นเตอร์ · Solar · EV Charging · โรงพยาบาล
เจ้าของโครงการ / ลูกค้าtext✅ชื่อเจ้าของหรือชื่อบริษัทลูกค้า
มูลค่าโครงการnumber · THB—แสดง compact (1.5 พันล้าน · 45 ล้าน) ใน Dashboard
ระยะเวลาโครงการdate range (Start → End)✅ระบบคำนวณ duration อัตโนมัติ · แสดง "XXX วัน (Y.Y เดือน)"
รายละเอียดโครงการtextarea—ระบุขอบเขต · เนื้องาน · ข้อพิเศษ
รูปประจำโครงการimage upload—ใช้แสดงบน card ใน list

3.2 Stepper 02 · ไซต์ / โซน

โครงการ 1 โครงการมีได้ หลายไซต์ (Site) · แต่ละไซต์มีได้ หลายโซน (Zone) · แต่ละโซนมีได้ หลายชั้น (Floor) · แต่ละชั้นมีได้ หลายห้อง (Room)

📐 โครงสร้าง Site → Zone → Floor → Room
Site (เช่น "อาคาร A") → รหัส · ชื่อ · ที่อยู่ (ตำบล/อำเภอ/จังหวัด — autocomplete)
↳ Zone (เช่น "ล็อบบี้" · "โซน North") → รหัส · ชื่อ · พื้นที่ (ตร.ม.)
    ↳ Floor (เช่น "ชั้น 1" · "ชั้น 5") → รหัส · ชื่อ
        ↳ Room (เช่น "R-101" · "Office A") → รหัส · ชื่อ · ประเภท

Summary ที่ระบบคำนวณอัตโนมัติ: N ไซต์ · M โซน · P ชั้น · Q ห้อง · แสดงบนหน้า Review และ Dashboard

3.3 Stepper 03 · สมาชิก (Members)

เพิ่มสมาชิกในโครงการพร้อมบทบาท · ระบบจะส่งงาน QC ตามสายงาน · บทบาทที่มี:

สมาชิกเลือกจาก dropdown ที่ pre-loaded จาก User Management · ต้องระบุอย่างน้อย 1 QC Manager + 1 QC Inspector

3.4 Stepper 04 · ไฟล์แบบโครงการ

แนบเอกสารที่ QC ต้องใช้ในการตรวจสอบ · ประเภทที่รองรับ:

ประเภทตัวอย่างFormat
DrawingArchitectural · Structural · MEP · Shop DrawingPDF · DWG
SpecificationMaterial spec · Standard specPDF · DOCX
Contractสัญญาก่อสร้าง · Change OrderPDF
BOQBill of Quantities · Cost estimateXLSX · PDF
OtherMethod Statement · ITP · Mill Certificate—

แต่ละไฟล์ระบุ: ชื่อไฟล์ · ประเภท · เวอร์ชัน · ผู้อัปโหลด (เลือกจากสมาชิกที่เพิ่มใน Stepper 03)

3.5 Stepper 05 · โครงสร้างการแบ่งงาน (WBS) — จุดสำคัญที่สุด

WBS คือหัวใจของระบบ — ระบุลำดับชั้นงาน L1 → L2 → L3 ที่จะถูกนำไปสร้าง Task inspection ในภายหลัง

3.5.1 หน้า Chooser — เลือกวิธีสร้าง WBS (3 โหมด)

⭐ แนะนำ
📋

ใช้เทมเพลทมาตรฐาน

8 เทมเพลทมาตรฐาน · Hold/Witness + Ref Std พร้อมใช้
➕

กรอกเอง

สร้าง WBS จากศูนย์ทีละบรรทัด · เหมาะกับโครงการเฉพาะ
📥

นำเข้าจาก Excel

อัปโหลด .xlsx ที่มีคอลัมน์ WBS-L1, WBS-L2, WBS-L3

3.5.2 กรณี 1.1 · สร้างจากเทมเพลทโครงการ (Template Mode)

ระบบมี 8 เทมเพลท WBS มาตรฐาน · แต่ละเทมเพลทมี tag ประเภทโครงการที่เหมาะสม · ระบบจะ แนะนำ (recommended) เทมเพลทที่ตรงกับ project type ที่ PM เลือกใน Stepper 01

  1. กด "ใช้เทมเพลทมาตรฐาน" · เข้าหน้า picker
  2. ดู 8 template cards — แต่ละใบแสดง icon · ชื่อ · version · จำนวน L3 · จำนวน HOLD · WITNESS points
  3. เทมเพลทที่ตรงกับ project type จะมี badge "⭐ แนะนำสำหรับโครงการนี้"
  4. คลิกเลือก template ที่ต้องการ · ระบบเรียก applyTemplateToForm()
  5. WBS ถูก pre-fill · form.wbsSource = {mode: 'template', templateId, version}
  6. สลับเป็น Active view — แสดง WBS tree ที่ pre-filled แล้ว
  7. Template mode (v8.0): ซ่อนฟิลด์ระดับ project-instance (Owner/Site/Zone/Dates/Status) ใน L3 · เพราะเทมเพลทเป็น "structure" เท่านั้น · ฟิลด์เหล่านี้จะกรอกใน Project WBS screen ภายหลัง
  8. PM สามารถ แก้ไข L1/L2/L3 name + Ref Std/Risk/HW dropdowns (v12.0) เพื่อ customize
  9. ปุ่ม "เปลี่ยน Template" โผล่ตอนสร้างใหม่ (v10.0) · ถ้ากดจะเจอ Confirm popup กันข้อมูลสูญ

3.5.3 กรณี 1.2 · สร้างเอง (Manual Mode)

เหมาะกับโครงการเฉพาะที่ไม่ตรงกับเทมเพลทมาตรฐาน · ผู้ใช้สร้าง WBS ทีละบรรทัด

1

เพิ่ม L1 (หมวดใหญ่)

กด "➕ กรอกเอง" · ระบบสร้าง L1 row ว่างให้ทันที · ระบุรหัส (เช่น 1, 2, 3) และชื่อ (เช่น "งานโครงสร้าง", "งาน MEP")

2

เพิ่ม L2 (หมวดย่อยภายใต้ L1)

กด "+ เพิ่ม L2" ที่แถว L1 · ระบบ generate 1.1 · ระบุชื่อ (เช่น "งานฐานราก")

3

เพิ่ม L3 (Activity ที่จะกลายเป็น Task)

กด "+ เพิ่ม L3" ที่แถว L2 · ระบบ generate 1.1.1 · ระบุ:

  • ชื่อ Activity (เช่น "ตอกเสาเข็ม", "เทคอนกรีต")
  • Ref Std (dropdown v11.0): มยผ. 1101-64 · วสท. 3001-56 · ASHRAE · etc.
  • Risk: H (High) · M (Medium) · L (Low)
  • Hold/Witness: HOLD · WITNESS · —
  • (หลังโครงการสร้างเสร็จ · ในหน้า Project WBS จะกรอก): Owner · Site · Zone · Start · End · Status
4

ทำซ้ำ · Expand / Collapse

ทำซ้ำขั้น 1-3 จนได้โครงสร้างครบ · ใช้ปุ่ม Expand/Collapse All เพื่อดูภาพรวม · Filter chips: All · Hold · Witness · by Site

5

Bulk Assign (ทางเลือก)

ถ้ามีสมาชิกใน Stepper 03 แล้ว · ระบบมีปุ่ม Bulk Assign สำหรับกำหนด Owner ให้ L3 หลายแถวพร้อมกัน (default = คนแรกใน members)

3.5.4 โหมด Import จาก Excel

  1. กด "นำเข้าจาก Excel" · ระบบเปิด file picker
  2. อัปโหลด .xlsx ที่มี column: WBS-L1 · WBS-L2 · WBS-L3 · ชื่อ · Ref Std · Risk · HW
  3. ระบบเรียก importWbsFromFile() · parse · validate · เติมข้อมูลเข้า form.wbs[]
  4. สลับเป็น Active view · PM สามารถแก้ไขต่อได้เหมือน manual mode

3.6 การ Save + Confirm Popup (v14.0)

เมื่อกด "สร้างโครงการ" ที่ปุ่ม primary · ระบบเปิด Confirm Popup แสดงสรุป:

4. กรณีที่ 2 — แก้ไขข้อมูลโครงการ

กดปุ่ม "✎ แก้ไข" บนการ์ดโครงการในหน้า List · ระบบเปิด CreateProject screen ในโหมด edit-existing

4.1 ความแตกต่างจากโหมด "สร้างใหม่"

ฟีเจอร์สร้างใหม่แก้ไข
Title"สร้างโครงการใหม่""แก้ไขโครงการ · {name}"
Back iconวงกลม (v13.0)วงกลม (v13.0)
Stepper 01-04ว่างเปล่าPre-filled ค่าเดิม · แก้ไขได้ทุกฟิลด์
Stepper 05 · WBS · โหมดChooser 3 modes ปรากฏข้ามไป Active view ทันที (WBS มีอยู่แล้ว)
Stepper 05 · ปุ่ม "เปลี่ยน Template"โผล่ (ถ้ามี WBS แล้ว)ซ่อน (v10.0) · กันข้อมูลสูญ · ต้องใช้ WBS Reset wizard แยก (roadmap)
Stepper 05 · project-instance fieldsซ่อน (template mode)ซ่อน (v9.0 · edit-existing mode)
Save button"✓ สร้างโครงการ""💾 บันทึกการแก้ไข"
Save confirm popupSummary + CreateDiff summary + Confirm

4.2 ขั้นตอนการแก้ไข

  1. เข้าหน้า Project List · หา project card ที่ต้องการแก้
  2. กด "✎ แก้ไข" · เปิด Create/Edit screen · form.wbsSource.mode ถูกตั้งเป็น 'existing-template' โดยอัตโนมัติ
  3. Nav ผ่าน 5 Stepper · แก้ไขข้อมูลที่จำเป็น (Zone เพิ่ม/ลด · Members สลับ · Files อัปเดต · WBS ปรับ)
  4. สำหรับ Stepper 05 (WBS) · ห้ามเปลี่ยน template · ทำได้แค่แก้ L1/L2/L3 name · Ref Std · Risk · HW · หรือเพิ่มแถวใหม่
  5. กด "💾 บันทึกการแก้ไข" · Confirm popup แสดงสรุปการเปลี่ยนแปลง · กด "ยืนยัน" → บันทึก + notify
⚠️ ข้อควรระวังในการแก้ไข

5. State ที่เกี่ยวข้อง

Stateค่าใช้ตอนไหน
mode'chooser' · 'template' · 'active' · 'import'WBS view mode
form.wbsSource.mode'template' · 'existing-template' · 'manual' · 'import'Track WBS origin · ควบคุมการซ่อนฟิลด์
form.wbs[]Array of L1/L2/L3 rowsFull WBS tree
form.sites[]Array of {code, name, address, zones[{code, name, area, floors[{code, name, rooms[]}]}]}Sites+Zones+Floors+Rooms nested
form.members[]Array of {name, email, role, phone}Team roster
form.files[]Array of {fileName, fileType, version, uploadBy}Attachments

6. สำหรับทีมพัฒนา

💡 Key Takeaways
⚠️ Edge Cases